<template>
	<view>
		<view class="mine-view">
			<u-navbar :border-bottom="false" :background="{backgroundColor: '#F8F8F8'}" title="个人中心"
				title-color="#333333" :custom-back="goback" back-icon-color='#333333'></u-navbar>
			<view class="mine-top-view">
				<u-cell-item @click="clickMineTopView()" hoverClass="none" :border-bottom="false" :title="userInfo.name"
					:label="userInfo.position"
					:title-style="{marginLeft: '30rpx', fontSize: '35rpx', fontWeight: 'bold'}"
					:label-style="{fontSize: '30rpx', fontWeight: 'normal'}">
					<u-avatar slot="icon" size="large"></u-avatar>
				</u-cell-item>
			</view>
			<view class="mine-bottom-view">
				<mine-cell title="我的资产" leftLabel="房屋建筑" rightLabel="土地" :leftNumber="buildNumber1"
					:rightNumber="landNumber1"></mine-cell>
				<mine-cell title="我的关注" leftLabel="房屋建筑" rightLabel="土地" :leftNumber="buildNumber2"
					:rightNumber="landNumber2"></mine-cell>
			</view>
		</view>
		<u-tabbar v-model="current" :list="list" active-color="#0071C5" inactive-color="#D2D3D3"
			:before-switch="beforeSwitch"></u-tabbar>
	</view>
</template>

<script>
	import mineCell from './mine-cell.vue'
	export default {
		components: {
			mineCell
		},
		onShow() {
			this.$u.api.getUserAssetList().then(res => {
				this.buildNumber1 = res.buildList.length
				this.landNumber1 = res.landList.length
			}).catch(err => {
				console.log(err)
			})
			this.$u.api.getUserAttentionList().then(res => {
				this.buildNumber2 = res.buildList.length
				this.landNumber2 = res.landList.length
			}).catch(err => {
				console.log(err)
			})
		},
		onLoad() {
			this.$u.api.getUserInfo().then(res => {
				this.userInfo = res
			}).catch(err => {
				console.log(err)
			})
		},
		data() {
			return {
				list: [{
						text: '首页',
						iconPath: "/static/img/property/home.png",
						selectedIconPath: "/static/img/property/select_home.png"
					},
					{
						text: '应用',
						iconPath: "/static/img/property/application.png",
						selectedIconPath: "/static/img/property/select_application.png"
					},
					{
						text: '我的',
						iconPath: "/static/img/property/mine.png",
						selectedIconPath: "/static/img/property/select_mine.png"
					}
				],
				current: 2,
				buildNumber1: 0,
				landNumber1: 0,
				buildNumber2: 0,
				landNumber2: 0,
				userInfo: {
					name: '',
					position: ''
				}
			}
		},
		methods: {
			goback() {
				uni.navigateBack({
					delta: 100,
					animationType: 'slide-out-right'
				})
			},
			clickMineTopView() {
				this.$u.route({
					url: 'pages/work/apply/property/mine/person-detail',
					params: this.userInfo
				})
			},
			beforeSwitch(index) {
				if (index == 0) {
					let pages = getCurrentPages()
					uni.navigateBack({
						delta: pages.length - 2
					})
					return false
				} else if (index == 1) {
					let pages = getCurrentPages()
					if (pages.length == 3) {
						this.$u.route({
							url: 'pages/work/apply/property/application/application',
							animationType: 'fade-in'
						})
					} else {
						uni.navigateBack()
					}
					return false
				} else {
					return false
				}
			}
		}
	}
</script>

<style lang="scss">
	.mine-view {
		background-color: #F8F8F8;
		height: calc(100vh - constant(safe-area-inset-bottom) - 50px);
		height: calc(100vh - env(safe-area-inset-bottom) - 50px);

		.mine-top-view {
			background-color: #FFFFFF;
			margin-top: 30rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			border-radius: 10rpx;
		}

		.mine-bottom-view {
			display: flex;
			flex-wrap: wrap;
			padding-left: 30rpx;
			justify-content: space-between;
		}
	}
</style>
